<!-- 考试结果页面 -->

<template>
	<view>
		
		<!-- 顶部间隔 -->
		<focus-box width="100" height="90"></focus-box>
		
		<!-- 结果卡片区域 -->
		<focus-box width="750" mode="col" justify="start" align="center" position="relative">
			
			<!-- 通过与否顶部图片容器 -->
			<focus-box width="164rpx" height="164rpx"
			position="absolute" left="293" top="0" index="1x">
				<!-- 通过 -->
				<image v-if="jieGuo.isThrough===true"
				style="width:164rpx; height:164rpx;"
				src="@/pagesB/static/img/question/success.png"></image>
				<!-- 未通过 -->
				<image v-else-if="jieGuo.isThrough===false"
				style="width:164rpx; height:164rpx;"
				src="@/pagesB/static/img/question/fail.png"></image>
			</focus-box>
			
			<!-- 卡片背景图片框 -->
			<view class="question-result-box-card">
				<!-- 间隔顶部 -->
				<focus-box width="100" height="16"></focus-box>
				<!-- 除去阴影后的内容容器框 -->
				<focus-box width="654" mode="col" justify="start" align="center">
					<!-- 间隔 -->
					<focus-box width="100" height="218"></focus-box>
					
					<!-- 描述文字容器 - 考试通过 -->
					<focus-box v-if="jieGuo.isThrough===true" width="510" mode="col">
						<focus-text size="34" color="white" text="全部答对啦，真是太棒了！"></focus-text>
						<focus-box mode="row" justify="center" align="center">
							<focus-text size="34" color="white" text="恭喜成功获得&nbsp;"></focus-text>
							<focus-text size="34" color="#FFB236" weight="bold" :text="jieGuo.score"></focus-text>
							<focus-text size="34" color="white" text="&nbsp;学分"></focus-text>
						</focus-box>
						<focus-box width="100" height="130"></focus-box>
					</focus-box>
					
					<!-- 描述文字容器 - 未通过 -->
					<focus-box v-else-if="jieGuo.isThrough===false" width="510" mode="col">
						<focus-text size="34" color="white" text="很遗憾，差一点就能获得学分了..."></focus-text>
						<focus-text size="34" color="white" text="快重新答题争取学分吧"></focus-text>
						<focus-box width="100" height="130"></focus-box>
					</focus-box>
					
					<!-- 题号循环容器 -->
					<focus-box width="564" mode="wrap" justify="start" align="start">
						
						<!-- 一个题号对象 -->
						<block v-for="(item,index) in jieGuo.list" :key="item.key">
							<!-- 题目正误呈现 组件 -->
							<order-item
								:order="item.order"
								:istrue="item.isTrue"
							></order-item>
						</block>
						
					</focus-box>
					
					<!-- 间隔 -->
					<focus-box width="100" height="100"></focus-box>
				</focus-box>
				<!-- 底部间隔 -->
				<focus-box width="100" height="78"></focus-box>
			</view>
		</focus-box>
		<!-- 底部按钮区域 -->
		<focus-box width="750" height="150">
			<!-- 悬浮容器 -->
			<focus-box width="750" height="150"
			mode="row" justify="center" align="center"
			position="fixed" left="0" bottom="0" index="3x"
			bg="white" shadow="true">
				
				<!-- 考试通过 - 重新练习按钮 -->
				<focus-box 
					v-if="jieGuo.isThrough===true"
					width="315" 
					height="80"
					mode="row" 
					justify="center" 
					align="center"
					bg="primary" 
					bgscheme="hover" 
					radius="40" 
					@click="resetClick"
				>
					<focus-text 
						size="32" 
						color="white" 
						text="重新练习"
					></focus-text>
				</focus-box>
				
				<!-- 考试通过 - 按钮中间的间距 -->
				<focus-box v-if="jieGuo.isThrough===true" width="24" height="24"></focus-box>
				
				<!-- 考试通过 - 返回课程按钮 -->
				<focus-box v-if="jieGuo.isThrough===true"
				width="315" height="80"
				mode="row" justify="center" align="center"
				bg="primary" bgscheme="hover" radius="40" @click="backClick">
					<focus-text size="32" color="white" text="返回课程"></focus-text>
				</focus-box>
				
				<!-- 确定按钮 -->
				<focus-box v-if="jieGuo.isThrough===false"
				width="654" height="80"
				mode="row" justify="center" align="center"
				bg="primary" bgscheme="hover" radius="40" @click="resetClick">
					<!-- 按钮文字 -->
					<focus-text size="32" color="white" text="重新练习"></focus-text>
				</focus-box>
				
			</focus-box>
		</focus-box>
		
	</view>
</template>


<script>
	// 接口请求文件引入
	import request from '../../../common/js/request/exam.js';
	
	// 组件引入
	import orderItem from './element/order-item/order-item.vue';
	
	/**
	 * 考试结果页面
	 * @description 考试结果页面，页面URL接收参数如下
	 * @property {String,Number} courseId 课程id
	 * @property {String,Number} jieId 小节id
	 * @property {String,Number} juanId 试卷id
	 * @property {String} from = [test|details] 来源父页面，默认：test
	 *   @value test 考试做题页面
	 *   @value details 课程详情页面
	 */
	export default {
		
		// 组件定义
		components: {
			orderItem,
		},

		// 页面数据
		data() {
			return {
				// 系统信息
				sys: {},
				
				// 传递数据
				send: {
					courseId: 0, // 课程id
					jieId: 0, // 小节id
					juanId: 0, // 试卷id
					from: 'test', // 来源父页面，默认从做题页面过来
				},
				
				// 试卷结果
				jieGuo: {
					isThrough: 111, // 是否通过考试
					score: 0, // 获得学分
					list: [], // 答题正误列表
				}
				
			}
		},

		// 页面加载完毕
		onLoad(options) {
			// 获取传递数据
			this.send = Object.assign(this.send, options);
			// 如果从考试做题页面过来
			if (this.send.from == 'test')
			{
				// 请求结果接口
				this.testResultsReq();
			}
			// 如果从课程详情页面过来
			else if (this.send.from == 'details')
			{
				// 获取试卷结果信息
				this.testPaperInfoReq();
			}
		},
		
		// 页面初次渲染完毕
		onReady() {
			// 获取系统信息
			uni.$focus.systemInfo((sysD)=>{ this.sys = sysD; });
		},
		
		// 分享到聊天
		onShareAppMessage() {},
		
		// 页面事件
		methods: {
			
			// ======================================== 页面事件
			// 重新练习按钮 点击
			resetClick() {
				// 清除当前页面栈跳转 做题考试页面
				uni.$focus.pageJump('/pagesB/pages/question/test/index', {
					courseId: this.send.courseId, // 课程id
					jieId: this.send.jieId, // 小节id
					term_id: this.send.term_id,
					cert_id: this.send.cert_id,
					item_type:this.send.item_type
				}, 'replace');
			},
			
			// 返回课程按钮 点击
			backClick() {
				// 页面回退即可
				uni.navigateBack();
			},
			
			
			// ======================================== 接口请求
			// 生成考试试卷最终结果
			testResultsReq() {
				
				// 发起请求
				request.testResults({
					// 普通要传输的数据
					data: {
						paper_id: this.send.juanId, // 卷子id
						cert_id: this.send.cert_id,//证书id
						term_id: this.send.term_id,//周期id
						item_type:this.send.item_type
					},
					// 成功回调
					success: (res) => {
						// 是否通过考试 赋值
						this.jieGuo.isThrough = res.info.isThough;
						// 考试获得学分 赋值
						this.jieGuo.score = res.info.score;
						// 答题正误列表 赋值
						this.jieGuo.list = res.list;
					},
				});
			},
			
			// 获取试卷结果信息
			testPaperInfoReq() {
				// 发起请求
				request.testPaperInfo({
					// 普通要传输的数据
					data: {
						paper_id: this.send.juanId, // 卷子id
					},
					// 成功回调
					success: (res) => {
						// console.log('===== 生成考试试卷最终结果：', res);
						// 是否通过考试 赋值
						this.jieGuo.isThrough = res.info.isThough;
						// 考试获得学分 赋值
						this.jieGuo.score = res.info.score;
						// 答题正误列表 赋值
						this.jieGuo.list = res.list;
					},
				});
			},
			
		},
	}
</script>


<style>
	/* 卡片背景图片框 */
	.question-result-box-card{
		width: 744rpx;
		margin-top: 65rpx;
		display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
		background-image: url(@/pagesB/static/img/question/bg.png);
		background-size: 100% 100%;
	}
</style>